<template>
    <div class="header">
      <div class="header-left">
        <div class="iconfont back-icon">&#xe625;</div>
      </div>
      <div class="header-input">
        <span class="iconfont">&#xe638;</span><input type="text" placeholder="请输入城市">
      </div>
      <router-link to="/city">
          <div class="header-right">{{this.currentCity}} <span class="iconfont">&#xe631;</span></div>
      </router-link>

    </div>
</template>

<script>
import {mapState } from 'vuex'
    export default {
        name: "HomeHeader",
        props:{
         // city:String
        },
        computed:{
          ...mapState({//把state的公用属性state映射到computed计算属性里面，映射过来的名字叫currentCity
            currentCity:'city'
          })
        }
    }
</script>

<style  lang="stylus" scoped>

  @import '../../../assets/styles/varibles.styl'
  /*引入变量进行设置$bgcolor,记得在style标签中引入前面加@，*/
.header
  height: $headerHeight;
  background: $bgColor;
  line-height: $headerHeight;
  display: flex;
  color:#fff
  .header-left
    width: 0.64rem
    text-align:center
    float: left
    .back-icon
        font-size:.5rem
  .header-input
    flex: 1
    background: #fff
    color:#cccccc
    border-radius: 0.1rem
    margin-top: 0.12rem
    margin-left: 0.2rem
    height: 0.62rem
    line-height: .62rem
    span
     font-size:0.4rem
    input
       /*background:pink*/
       -webkit-appearance: none
       -moz-appearance: none
       appearance: none
  .header-right
    min-width: 1.04rem
    padding: 0 0.2rem
    text-align: center
    float: right
    color:#fff




</style>
